<template>
  <div class="app-container">
    <el-row :gutter="20" style="height: 100%;margin-left:0;margin-right: 0;">
<!--      <el-col :span="21" :xs="24" style="padding-left: 0;padding-right: 0;">-->
        <!--        <el-row class="page-title">-->
        <!--          <el-dropdown v-if="toolbarData.length>4">-->
        <!--            <span class="el-dropdown-link">-->
        <!--              <i class="el-icon-menu"></i>-->
        <!--              <i class="el-icon-arrow-down"></i>-->
        <!--            </span>-->
        <!--            <el-dropdown-menu slot="dropdown">-->
        <!--              <el-dropdown-item v-for="(btn, key) in toolbarData" v-if="btn.status==='1'" @click="clickEvent(btn.type,btn.url)">{{ btn.name }}</el-dropdown-item>-->
        <!--            </el-dropdown-menu>-->
        <!--          </el-dropdown>-->
        <!--          <div class="flex" v-if="toolbarData.length<=4">-->
        <!--            <template v-for="(btn, key) in toolbarData">-->
        <!--              <el-button-->
        <!--                v-if="btn.status==='1'"-->
        <!--                :type="btn.styleType"-->
        <!--                :icon="btn.icon"-->
        <!--                size="mini"-->
        <!--                @click="clickEvent(btn.type,btn.url)"-->
        <!--              >{{ btn.name }}-->
        <!--              </el-button>-->
        <!--            </template>-->
        <!--          </div>-->
        <!--        </el-row>-->

        <div class="mainContent">
          <div class="manage-header">
            <el-form :inline="true" :model="queryParams" ref="queryForm" label-width="auto" @submit.native.prevent>

              <el-form-item v-if="searchFormData.length!=0 && searchFormData[0].status === '1'" :key="searchFormData[0].prop" :label="searchFormData[0].name">
                <el-input size="small" v-model="queryParams[searchFormData[0].prop]" :placeholder="'请输入' + searchFormData[0].name"></el-input>
              </el-form-item>

              <el-form-item  v-if="searchFormData.length!=0">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button type="info" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                <el-button v-if="searchFormData.length>1" icon="el-icon-arrow-down" size="mini" id="more-attr" @click="moreattr">更多属性</el-button>
              </el-form-item>

              <div id="more-list" style="display: none;">
                <el-form-item v-for="item in searchFormData.slice(1)" :key="item.prop" :label="item.name" v-if="item.status === '1'">
                  <!--根据type来显示是什么标签-->
                  <el-select v-model="queryParams[item.prop]" placeholder="请选择" v-if="item.componentType === 'el-select'">
                    <el-option v-for="item in item.optionValue" :key="item.value" :label="item.label" :value="item.value"
                    ></el-option>
                  </el-select>

                  <el-date-picker v-model="queryParams[item.prop]" size="small" style="width: 240px" value-format="yyyy-MM-dd"
                                  type="daterange"
                                  range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                                  v-if="item.componentType === 'el-date-picker'"
                  ></el-date-picker>

                  <el-input size="small" v-model="queryParams[item.prop]" :placeholder="'请输入' + item.name" v-else></el-input>
                </el-form-item>
              </div>
            </el-form>
<!--            <dynamic-search-form inline :formData="formData" :form="listQuery"  @postForm="postData"></dynamic-search-form>-->
          </div>

          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <template v-for="(btn, key) in operates.list">
                <el-button
                  v-if="btn.status==='1' && btn.location==='2'"
                  :type="btn.styleType"
                  :icon="btn.icon"
                  size="mini"
                  @click="clickEvent(btn.type,btn.url)"
                  v-hasPermi="['pms:type:add']"
                >{{ btn.name }}
                </el-button>
              </template>
            </el-col>
            <el-popover title="列筛选" trigger="click" style="float: right;margin-right: 10px;">
              <el-checkbox-group v-model="checkedColumns" size="mini">
                <el-checkbox style="display: block;" v-for="(item,index) in tableData" :key="item.name"
                             :label="item.name"
                             @change="chickBoxGroupChange(item)"
                >{{ item.name }}
                </el-checkbox>
              </el-checkbox-group>
              <el-button size="small" slot="reference"><i class="el-icon-arrow-down el-icon-menu"></i></el-button>
            </el-popover>
          </el-row>

          <el-row v-if="tableData.length>0">
            <!--列表数据-->
            <dynamic-table :list="list" @handleSelectionChange="handleSelectionChange" :options="options"
                           :columns="tableData" :operates="operates">
            </dynamic-table>
<!--            <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"-->
<!--                        @pagination="getList"/>-->
          </el-row>
        </div>
<!--      </el-col>-->
    </el-row>
  </div>
</template>
<script>
import dynamicSearchForm from '@/views/components/dynamicSearchForm'
import dynamicTable from '@/views/components/dynamicTable'
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import IconSelect from "@/components/IconSelect";
import {getDataList, getConfigInfo} from '@/api/dynamic/dynamicDetails'

export default {
  components: {
    Treeselect,
    IconSelect,
    dynamicSearchForm,
    dynamicTable
  },
  data() {
    return {
      defaultOpen: 'el-icon-remove-outline',
      defaultClose: 'el-icon-circle-plus-outline',
      activeName: 'tree',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      pageTitle: '',
      options: {// table 的参数
        stripe: true, // 是否为斑马纹 table
        loading: false, // 是否添加表格loading加载动画
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        mutiSelect: true // 是否支持列表项选中功能
      },
      defaultProps: {
        children: "children",
        label: "label"
      },
      params:{},
      toolbarData: [],
      searchFormData: [],
      tableData: [],
      treeMenu: [],
      treeData: [],
      list: [],
      checkedColumns: [],
      columns: [],// 需要展示的列
      operates: {// 列操作按钮
        width: 150,
        list: []
      },
      queryConfigParams:{},
      fileUrl:undefined,
      queryParams: {
        pageNum:1,
        pageSize: 10,
      },
    }
  },
  created() {
    let params = this.$route.query;
    if(typeof params.pageParams == 'string'){
      this.params=params=JSON.parse(sessionStorage.getItem('api_bom'+this.$route.params.Id));
    }else{
      sessionStorage.setItem('api_bom'+this.$route.params.Id,JSON.stringify(params));
      this.params=params;
    }
    if(params.pageParams && params.rowParams){
      this.queryConfigParams.table = params.pageParams.table;
      this.queryConfigParams.searchform = params.pageParams.searchform;
      this.queryConfigParams.command = params.pageParams.command;
      this.getConfig();
      var url = this.getUrl(params.pageParams.url);
      this.getList(url);
    }else{
      this.msgError("缺少参数");
      return false;
    }
  },
  methods: {
    /** 获取配置信息 */
    getConfig() {
      this.loading = true;
      getConfigInfo(this.queryConfigParams).then(response => {
        this.tableData = response.data.tableData;
        this.searchFormData = response.data.searchFormData;
        this.treeMenu = response.data.treeMenuData;
        this.toolbarData = response.data.toolbarData;
        this.loading = false;
      })
    },
    /** 获取列表数据 */
    getList(url) {
      this.loading = true;
      getDataList(url,this.queryParams).then(response => {
        if (response.code == '0') {
          this.list = this.handleTree(response.data, "id");
        }
        this.loading = false
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    //查询按钮
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    //重置
    resetQuery() {
      this.queryParams={
        pageNum: 1,
        pageSize: 10,
      }
      this.handleQuery();
    },
    clickEvent() {

    },
    // 节点单击事件
    handleNodeClick(data) {

    },

    //控制列显示
    chickBoxGroupChange(item) {
      item.show = !item.show
    },
  }
}
</script>

